<template>
    <div class="batch-update-dialog" >
      <el-dialog title="批量更新" :visible="visible" align="center" width="30%" @close="reset">
        <el-form class="form">
          <el-form-item label="试题分类:">
            <el-button @click="showCategoryDialog">{{category?category.name:'请选择'}}</el-button>
          </el-form-item>
          <el-form-item label="试题难度:">
            <el-radio-group v-model="level">
              <el-radio label="简单"></el-radio>
              <el-radio label="普通"></el-radio>
              <el-radio label="困难"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="right">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
      <category-dialog @on-confirm="category = $event"/>
    </div>
</template>

<script>
import CategoryDialog from '../editQues/CategoryDialog'
import api from '@/api'
export default {
  mounted () {
    let __this = this
    this.$bus.$on('batch-update', function () {
      __this.visible = true
    })
  },
  data () {
    return {
      category: null,
      level: null,
      visible: false
    }
  },
  components: {
    CategoryDialog
  },
  methods: {
    showCategoryDialog () {
      this.$bus.$emit('toggle-category-dialog', true)
    },
    update () {
      if (this.level == null && this.category == null) {
        this.$message.error('您没有选择要更新的操作！')
      } else {
        let arr = []
        this.$store.state.question.selectedQuestions.forEach((question) => {
          arr.push(question.id)
        })
        api.batchQuestionUpdate(arr, (this.category ? this.category.id : null), this.$converters.convertLevel(this.level))
          .then(api.commonResp((success) => {
            if (success) {
              this.$message('更新成功')
              this.$bus.$emit('refresh-question')
            } else {
              this.$message.error('更新失败')
            }
          }))
      }
      this.visible = false
    },
    reset () {
      this.category = null
      this.level = null
    }
  }
}
</script>

<style scoped lang="less">
  .el-form.form{
    width: 80%;
  }

</style>
